import React from "react";
import {
    Button,
    Card,
    List,
    Image,
    Form,
    Input,
    FormProps,
    InputNumber,
    Select,
    Upload,
    UploadProps,
    message, Badge
} from "antd";
import useHotProduct from "@/hooks/get_hot_product.ts";
import {Item} from '@/vite-env'
import {UploadOutlined} from "@ant-design/icons";

type FieldType = {
    product_name?: string;
    product_description?: string;
    price?: number;
    stock_quantity?: number;
    category_id?: number;
    image?: string;
};

const Product_Hot: React.FC = () => {
    // 热销商品数据
    const {HotData} = useHotProduct()
    console.log(HotData)
    const count: number = HotData.length

    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
    };

    // 上传图片
    const props: UploadProps = {
        name: 'file',
        action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    return (
        <div>
            <Card
                bordered={false}
                style={{
                    width: '100%',
                    height: '90vh',
                    overflowY: 'hidden',
                }}
            >
                <div style={{display: 'flex', width: '100%'}}>
                    <div style={{width: '35vw', height: '80vh', overflowY: 'auto', overflowX: 'hidden'}}>
                        <List
                            size="large"
                            bordered
                            header={<Badge count={count} size={'small'} offset={[10, -2]}><b>热销商品</b></Badge>}
                            style={{width: '35vw'}}
                            dataSource={HotData}
                            renderItem={(item: Item) => <List.Item>
                                <div style={{display: 'flex', width: '100%', justifyContent: 'space-between'}}>
                                    <div style={{flex: '30%'}}>
                                        <Image
                                            style={{borderRadius: '10px'}}
                                            width={150}
                                            src={item.image}
                                        />
                                    </div>

                                    <div style={{
                                        flex: '70%',
                                        display: 'flex',
                                        marginLeft: '20px',
                                        justifyContent: 'space-between'
                                    }}>
                                        <div style={{width: '50%', marginLeft: '10px'}}>
                                            <p>商品名称：{item.product_name}</p>
                                            <p style={{
                                                width: '200px',
                                                overflow: 'hidden',
                                                textOverflow: 'ellipsis',
                                                whiteSpace: 'nowrap'
                                            }}>商品描述：{item.product_description}</p>
                                            <p>商品价格：￥{item.price + '元'}</p>
                                            <p>商品分类：{item.category_id}</p>
                                        </div>

                                        <div style={{
                                            width: '40%',
                                            height: '100px',
                                            marginLeft: '50px',
                                            display: 'flex',
                                            flexFlow: 'column',
                                            justifyContent: 'space-around'
                                        }}>
                                            <Button>修改</Button>
                                            <Button type={'primary'} danger>下架商品</Button>
                                        </div>
                                    </div>
                                </div>
                            </List.Item>}
                        />
                    </div>

                    <div style={{width: '50%', height: '80vh', overflowY: 'auto'}}>
                        <Form
                            name="basic"
                            labelCol={{span: 8}}
                            wrapperCol={{span: 16}}
                            style={{maxWidth: 700, marginTop: '50px'}}
                            initialValues={{remember: true}}
                            onFinish={onFinish}
                            autoComplete="off"
                        >
                            <Form.Item<FieldType>
                                label="商品名称"
                                name="product_name"
                                rules={[{required: true, message: '商品名称不能为空！'}]}
                            >
                                <Input placeholder="请输入商品名称"/>
                            </Form.Item>

                            <Form.Item<FieldType>
                                label="商品分类"
                                name="category_id"
                                rules={[{required: true, message: '商品分类不能为空！'}]}
                            >
                                <Select
                                    showSearch
                                    placeholder="请选择商品分类"
                                    optionFilterProp="label"
                                    options={[
                                        {
                                            value: 'jack',
                                            label: 'Jack',
                                        },
                                        {
                                            value: 'lucy',
                                            label: 'Lucy',
                                        },
                                        {
                                            value: 'tom',
                                            label: 'Tom',
                                        },
                                    ]}
                                />
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="商品图片"
                                name="image"
                                rules={[{required: true, message: '商品图片不能为空！'}]}
                            >
                                <Upload {...props}>
                                    <Button icon={<UploadOutlined/>}>点击上传商品图片</Button>
                                </Upload>
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="商品价格"
                                name="price"
                                rules={[{required: true, message: '商品价格不能为空！'}]}
                            >
                                <InputNumber defaultValue={3}/>
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="库存数量"
                                name="stock_quantity"
                                rules={[{required: true, message: '库存数量不能为空！'}]}
                            >
                                <InputNumber defaultValue={3}/>
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="商品详情"
                                name="product_description"
                                rules={[{required: true, message: '商品详情不能为空！'}]}
                            >
                                <Input.TextArea placeholder="请输入商品详情" autoSize={
                                    {minRows: 4, maxRows: 6}
                                }/>
                            </Form.Item>
                            <Form.Item wrapperCol={{offset: 8, span: 16}}>
                                <Button type="primary" htmlType="submit">
                                    添加商品
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </Card>
        </div>
    )
}

export default Product_Hot